<template>
	<view class="tag-content">
		<view class="title">性别</view>
		<view class="tag-item" >
			<view class="" v-for="(item, index) in sexCheckboxs" :key="index">
				<u-tag
					class="tag"
					:text="item.name"
					:plain="!item.checked"
					type="warning"
					shape="circle"
					:name="index"
					@click="sexCheckboxClick"
				>
				</u-tag>
		  </view>
		</view>
		<view class="title">兴趣</view>
		<view class="tag-item" >
			<view class="" v-for="(item, index) in hobbyCheckboxs" :key="index">
				<u-tag
					class="tag"
					:text="item.name"
					:plain="!item.checked"
					type="warning"
					shape="circle"
					:name="index"
					@click="hobbyCheckboxClick"
				>
				</u-tag>
		  </view>
		</view>
		
		<view class="title">爱好</view>
		<view class="tag-item" >
			<view class="" v-for="(item, index) in interestCheckboxs" :key="index">
				<u-tag
					class="tag"
					:text="item.name"
					:plain="!item.checked"
					type="warning"
					shape="circle"
					:name="index"
					@click="interestCheckboxClick"
				>
				</u-tag>
		  </view>
		</view>
		
		<view class="title">生活</view>
		<view class="tag-item" >
			<view class="" v-for="(item, index) in lifeCheckboxs" :key="index">
				<u-tag
					class="tag"
					:text="item.name"
					:plain="!item.checked"
					type="warning"
					shape="circle"
					:name="index"
					@click="lifeCheckboxClick"
				>
				</u-tag>
		  </view>
		</view>
		
		<view class="title">其他标签</view>
		<view class="tag-item" >
			<view class="" v-for="(item, index) in checkboxs" :key="index">
				<u-tag
					class="tag"
					:text="item.name"
					:plain="!item.checked"
					type="warning"
					shape="circle"
					:name="index"
					@click="checkboxClick"
				>
				</u-tag>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sexCheckboxs:[
					{
						checked: true,
						name:"男"
					},
					{
						checked: false,
						name:"女"
					},
				],
				hobbyCheckboxs:[
					{
						checked: false,
						name:"桌面游戏"
					},
					{
						checked: false,
						name:"动漫"
					},
					{
						checked: false,
						name:"唱歌"
					},
					{
						checked: false,
						name:"写作"
					},
					{
						checked: false,
						name:"抽象"
					},
					{
						checked: false,
						name:"阅读"
					},
					{
						checked: false,
						name:"钢琴"
					},
					{
						checked: false,
						name:"rapper"
					},
					{
						checked: false,
						name:"养生"
					},
					
				],
				interestCheckboxs:[
					{
						checked: false,
						name:"汉服"
					},
					{
						checked: false,
						name:"极限运动"
					},
					{
						checked: false,
						name:"古筝"
					},
					{
						checked: false,
						name:"看综艺"
					},
					{
						checked: false,
						name:"高尔夫"
					},
					{
						checked: false,
						name:"剪辑"
					},
				],
				lifeCheckboxs:[
					{
						checked: false,
						name:"极简主义"
					},
					{
						checked: false,
						name:"抽象"
					},
					{
						checked: false,
						name:"烹饪"
					},
					
				],
				checkboxs: [
					{
						checked: false,
						name:"大海控"
					},
					{
						checked: false,
						name:"热爱旅行"
					},
					{
						checked: false,
						name:"自由洒脱"
					},
					{
						checked: false,
						name:"烹饪"
					},
					{
						checked: false,
						name:"运动达人"
					},
					{
						checked: false,
						name:"爬山"
					},
					{
						checked: false,
						name:"大海控"
					},
				],
			}
		},
		methods: {
			sexCheckboxClick(name) {
			    this.sexCheckboxs.map((item, index) => {
			        item.checked = index === name ? true : false;
			    });
			},
			hobbyCheckboxClick(name){
				this.hobbyCheckboxs[name].checked = !this.hobbyCheckboxs[name].checked;
			},
			interestCheckboxClick(name){
				this.interestCheckboxs[name].checked = !this.interestCheckboxs[name].checked;
			},
			lifeCheckboxClick(name){
				this.lifeCheckboxs[name].checked = !this.lifeCheckboxs[name].checked;
			},
			checkboxClick(name) {
			    this.checkboxs[name].checked = !this.checkboxs[name].checked;
			},
		}
	}
</script>

<style lang="scss">
	.tag-content{
		padding: 50rpx;
		display: flex;
		flex-direction: column;
	}
	.title{
		font-weight: 700;
		margin: 30rpx 0;
		// background-color: #FFA164;
		color: #FFA164;
	}
	.tag-item{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.tag{
		// width: 150rpx;
		margin: 10rpx;
	}
</style>
